<template>
  <div>
    <h1>computed函数和vue2一样</h1>
  </div>

  <ul>
    <li>{{ count }}</li>
    <li v-for="(item, index) in list" :key="item" @click="del(index)">
      {{ item }}
    </li>
  </ul>
  <h3>计算后的值 大于3</h3>
  <li v-for="item in thirdList" :key="item">{{ item }}</li>
  <h3>每次增加10</h3>
  <ul>
    <li>{{ countList }}</li>
  </ul>
  <button @click="add">增加</button>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  setup () {
    const count = ref(0)
    const countList = computed(() => {
      return count.value + 10
    })
    // 定义变量
    const list = ref([1, 2, 3, 6, 5])
    // 增加
    const add = () => {
      list.value.push(Math.random() * 100 + 1)
    }
    // 删除
    const del = (i) => {
      list.value.splice(i, 1)
    }
    // 计算属性
    // const 计算属性变量名 = computed(()=>{return 返回计算结果})
    const thirdList = computed(() => {
      return list.value.filter(item => item > 3)
    })

    return { list, add, del, count, thirdList, countList }
  }
}
</script>

<style lang="scss" scoped>
</style>
